<template>
  <div
    class="kgArchives flex"
    v-loading="loading"
    element-loading-text="拼命加载中"
  >
    <div class="archives-sider">
      <search-comp
        :isArchives="true"
        :entityObj="entityObj"
        @handleSearch="handleSearch"
      ></search-comp>
      <div class="archives-sider-body">
        <div class="archives-sider-header flex">
          <div class="sidebar-header-record">
            <span>{{ total }}</span> 记录 /
            <span>{{ checkEntityList.length }}</span> 选中
          </div>
          <el-pagination
            v-model:current-page="entityObj.current"
            small
            :background="false"
            :pager-count="5"
            layout=" prev, pager, next"
            :total="total"
            @current-change="handleCurrentChange"
          />
        </div>
        <div class="archives-sider-content">
          <el-scrollbar v-if="entityList.length">
            <div
              class="archives-sider-item cursor-pointer"
              :class="currentEntity.vid === archive.vid ? 'active' : ''"
              v-for="archive in entityListCmp"
              :key="archive.vid"
              @click="handleArchiveClick(archive)"
            >
              <div class="sidebar-item-left">
                <div class="sidebar-item-left-name">{{ archive.name }}</div>
                <div class="sidebar-item-left-classify">
                  <span>所属分类：</span>{{ archive.entityTypeName }}
                </div>
                <div class="sidebar-item-left-entity">
                  <span>所属本体：</span>{{ archive.entityType }}
                </div>
              </div>
              <div class="sidebar-item-right">
                <el-checkbox
                  v-model="archive.isCheck"
                  @click="stopDefault($event)"
                  size="large"
                />
              </div>
            </div>
          </el-scrollbar>

          <empty-detail v-else></empty-detail>
        </div>
      </div>
      <div class="archives-sider-footer flex justify-around items-center">
        <el-checkbox
          class="mr-0"
          :model-value="currentCheckAllCmp"
          @change="handleCurrentCheck"
          :disabled="!!!+entityList.length"
          label="当前页全选"
        />
        <el-checkbox
          :model-value="checkAllCmp"
          @change="handleCheckAll"
          :disabled="!!!+entityList.length"
          label="全部全选"
        />
        <el-button type="primary" :disabled="!checkEntityList.length"
          >导入关联分析</el-button
        >
      </div>
    </div>
    <div class="archives-container flex flex-col flex-1">
      <div v-if="entityList.length" class="archives-container-tab">
        <el-carousel
          :loop="false"
          :autoplay="false"
          arrow="always"
          indicator-position="none"
          ref="carouselRef"
        >
          <el-carousel-item
            style="height: 64px"
            v-for="(tabL, index) in tabCompList"
            :key="index"
          >
            <div class="tab flex">
              <div
                class="tab-item flex cursor-pointer"
                v-for="tab in tabL"
                :key="tab.id"
                :class="tab.vid === currentEntity.vid ? 'active' : ''"
                @click="handleTabClick(tab)"
              >
                <div class="name" :title="tab.name">{{ tab.name }}</div>
                <i
                  class="iconfont icon_close cursor-pointer"
                  @click.stop="handleDeleteTab(tab)"
                ></i>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div
        v-if="entityList.length"
        class="archives-container-detail flex-1 w-full bg-white mt-4"
      >
        <div class="archives-container-detail-header">
          <div class="text">详情</div>
        </div>
        <div class="archives-container-detail-body" v-if="currentEntity">
          <div class="detail-body-top flex mt-[24px] mb-[28px]">
            <div
              class="w-[88px] h-[88px] rounded-full mr-[32px] flex justify-center items-center"
              :style="{ backgroundColor: currentEntity.backgroundColor }"
            >
              <i
                class="text-white !text-[40px] iconfont"
                :class="currentEntity.icon"
              ></i>
            </div>
            <div class="archives-sider-detail-item">
              <div class="sidebar-item-left">
                <div class="sidebar-item-left-name">
                  {{ currentEntity.name }}
                </div>
                <div class="sidebar-item-left-classify">
                  <span>所属分类：</span>{{ currentEntity.entityTypeName }}
                </div>
                <div class="sidebar-item-left-entity">
                  <span>所属本体：</span>{{ currentEntity.entityType }}
                </div>
              </div>
            </div>
          </div>
          <ul class="detail-body-content max-h-[540px] overflow-y-auto">
            <li class="detail-body-content-prop flex bg-[#F7F8FA]">
              <div class="propName">属性名</div>
              <div class="propValue">属性值</div>
            </li>
            <li
              class="detail-body-content-prop flex"
              style="border-bottom: 1px solid #edeff4"
              v-for="item in currentEntity.entityAttrList"
              :key="item.code"
            >
              <div class="propName">{{ item.name }}</div>
              <div class="propValue">{{ item.value }}</div>
            </li>
          </ul>
        </div>
      </div>
      <div v-else class="w-full h-full bg-white">
        <empty-comp></empty-comp>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRoute } from "vue-router";
import SearchComp from "@/views/kgKnowledgePortal/search-comp.vue";
import { entityListApi } from "@/api/kgKnowledgePortal/index";
export interface EntityObjInterFace {
  entityType: string;
  name: string;
  comEntityAttr: { sysType: string };
  entityAttrList: Array<any>;
  current?: number;
  size?: number;
}
const route = useRoute();
let entityObj = reactive<EntityObjInterFace>({
  entityType: "",
  name: "",
  comEntityAttr: { sysType: "1" },
  entityAttrList: [],
  current: 1,
  size: 10,
});

/**
 * 针对列表的处理
 * */
const entityList = ref([]);
const total = ref(0);
const currentEntity: Ref<any> = ref({});
const tabList = ref([]);
const loading = ref(false);
const getEntityList = async () => {
  loading.value = true;
  let { code, data } = await entityListApi(entityObj).catch(() => {
    loading.value = false;
  });
  if (code === 200) {
    entityList.value = data.records.map((item) => {
      return {
        ...item,
        isCheck: false,
      };
    });
    //如果有数据，把第一个数据默认展示
    if (entityList.value.length) {
      currentEntity.value = entityList.value[0];
      tabList.value.push(currentEntity.value);
    }
    loading.value = false;

    total.value = data.total;
  } else {
    loading.value = false;
  }
};
//监听值
watch(
  () => route.query.comEntityAttr,
  async (id) => {
    if (id) {
      entityObj.comEntityAttr.sysType = id as string;
      entityObj.entityType = route.query.entityType as string;
      entityObj.name = route.query.name as string;
      entityObj.entityAttrList = JSON.parse(
        route.query.entityAttrList as string
      );
      await getEntityList();
    }
  },
  {
    immediate: true,
  }
);
onMounted(() => {
  //在从门户跳转过来时
  if (!route.query.comEntityAttr) {
    getEntityList();
  }
});

/**
 * 搜索部分
 */
const handleSearch = (query) => {
  tabList.value = [];
  currentEntity.value = {};
  entityObj.entityType = query.entityType;
  entityObj.name = query.name;
  entityObj.entityAttrList = JSON.parse(query.entityAttrList);
  entityObj.comEntityAttr.sysType = query.comEntityAttr;
  entityObj.current = 1;
  getEntityList();
};
//手动计算分页列表
const entityListCmp = computed({
  get: () => {
    return entityList.value.slice(
      (entityObj.current - 1) * 10,
      entityObj.current * 10
    );
  },
  set: () => {},
});
//计算当前页选择问题
const currentCheckAllCmp = computed(() => {
  if (!entityListCmp.value.length) return false;
  return entityListCmp.value.every((item) => {
    return item.isCheck;
  });
});
const handleCurrentCheck = (val) => {
  if (val) {
    entityListCmp.value = entityListCmp.value.map((item) => {
      item.isCheck = true;
      return item;
    });
  } else {
    entityListCmp.value = entityListCmp.value.map((item) => {
      item.isCheck = false;
      return item;
    });
  }
};
const handleClearAllCheck = () => {
  entityList.value.map((item) => {
    item.isCheck = false;
    return item;
  });
};
//计算全部全选
const checkAllCmp = computed(() => {
  if (!entityList.value.length) return false;
  return entityList.value.every((item) => {
    return item.isCheck;
  });
});
const handleCheckAll = (val) => {
  if (val) {
    entityList.value = entityList.value.map((item) => {
      item.isCheck = true;
      return item;
    });
    console.log(checkAllCmp);
  } else {
    handleClearAllCheck();
  }
};
//计算选中状态
const checkEntityList = computed(() => {
  return (
    entityList.value.filter((item) => {
      return item.isCheck;
    }) || []
  );
});
//计算tab的添加
const carouselRef = ref();
const handleArchiveClick = (item) => {
  if (item.vid === currentEntity.value.vid) {
    nextTick(() => {
      findCarouselIndex(item);
    });
    return;
  }
  currentEntity.value = item;
  let flag = tabList.value.find((tab) => {
    return tab.vid === item.vid;
  });
  if (flag) {
    nextTick(() => {
      handleArchiveClick(item);
    });

    return;
  }
  tabList.value.push(item);
  nextTick(() => {
    findCarouselIndex(item);
  });
};
const findCarouselIndex = (item) => {
  let index = tabList.value.findIndex((tab) => {
    return tab.vid === item.vid;
  });
  if (index == -1) return;
  let currentCarouseIndex = Math.floor(index / 7);
  carouselRef.value.setActiveItem(currentCarouseIndex);
};

const handleDeleteTab = (tab) => {
  if (tab.vid === currentEntity.value.vid) {
    let tabIndex = tabList.value.findIndex((item) => {
      return tab.vid === item.vid;
    });
    tabList.value.splice(tabIndex, 1);

    if (tabList.value.length) {
      currentEntity.value = tabList.value[tabList.value.length - 1];
    } else {
      currentEntity.value = {};
    }
  } else {
    let tabIndex = tabList.value.findIndex((item) => {
      return tab.vid === item.vid;
    });
    tabList.value.splice(tabIndex, 1);
  }
};

const tabCompList = computed(() => {
  return group(tabList.value, 7);
});

/**
 * 数组拆分
 * */
const group = (array, subGroupLength) => {
  if (!array?.length) return [];
  let index = 0;
  let newArray = [];
  while (index < array.length) {
    newArray.push(array.slice(index, (index += subGroupLength)));
  }
  return newArray;
};

const handleTabClick = (tab) => {
  currentEntity.value = tab;
};

const stopDefault = (e) => {
  e.stopPropagation();
};

const handleCurrentChange = (val: number) => {
  entityObj.current = val;
};
</script>

<style scoped lang="scss">
.kgArchives {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  margin: 0 !important;
}

.archives-sider {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 355px;
  height: 100%;
  padding: 16px 8px 0;
  background: #fff;

  & ::v-deep .kg-header-search {
    margin-top: 0;
  }

  .archives-sider-header {
    margin: 16px 0;

    .sidebar-header-record {
      margin-right: 10px;
      font-size: 14px;

      span {
        color: #2b1dff;
      }
    }
  }

  .archives-sider-body {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    overflow: hidden;

    .archives-sider-content {
      flex: 1;
      margin-bottom: 48px;
      overflow-y: auto;
    }
  }

  .archives-sider-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
    width: 355px;
    height: 48px;
    background: #fff;
    border: 1px solid #edeff4;
  }

  .archives-sider-item {
    display: flex;
    justify-content: space-between;
    height: 120px;
    padding: 16px;
    margin: 10px 0;
    color: #222;
    background: #fff;
    border: 1px solid #bfbfbf;
    border-radius: 4px;

    &:hover {
      border: 1px solid #2b1dff;
      box-shadow: inset 3px 0 0 0 #2b1dff;
    }
  }

  .archives-sider-item.active {
    border: 1px solid #2b1dff;
    box-shadow: inset 3px 0 0 0 #2b1dff;
  }
}

.sidebar-item-left-name {
  font-size: 16px;
}

.sidebar-item-left-classify,
.sidebar-item-left-entity {
  font-size: 12px;
  font-weight: 400;

  span {
    color: #7f8a9b;
  }
}

.sidebar-item-left-classify {
  margin: 16px 0 8px;
}

.archives-container {
  padding: 17px;

  .archives-container-tab {
    width: 100%;
    height: 64px;
    background: rgb(255 255 255);

    ::v-deep .el-carousel__container {
      height: 64px;

      .el-carousel__arrow {
        background: rgb(255 255 255);
        box-shadow: rgb(13 22 50 / 10%) 0 2px 8px 0;

        .el-icon {
          color: #99a3b8;
        }
      }

      .tab {
        padding: 16px 44px;
      }

      .tab-item.active {
        color: #fff;
        background: #2b1dff;
      }

      .tab-item {
        width: 177px;
        height: 32px;
        padding: 0 4px;
        margin: 0 15px;
        line-height: 32px;
        color: #7f8a9b;
        background: #f7f8fa;
        border-radius: 4px;

        &:hover {
          color: #fff;
          background: #2b1dff;
        }

        .name {
          width: 145px;
          overflow: hidden; /* 溢出隐藏 */
          font-size: 14px;
          text-overflow: ellipsis; /* 溢出显示省略号 */
          white-space: nowrap; /* 强制不换行 */
        }
      }
    }
  }

  .archives-container-detail {
    padding: 0 24px;

    .archives-container-detail-header {
      line-height: 58px;
      border-bottom: 1px solid #edeff4;

      .text {
        position: relative;
        margin-left: 10px;
        font-size: 18px;
        font-weight: bold;
        color: #2b1dff;

        &::before {
          position: absolute;
          top: 22px;
          left: -10px;
          width: 3px;
          height: 16px;
          content: "";
          background: #2b1dff;
        }
      }
    }

    .detail-body-content-prop {
      font-size: 14px;
      line-height: 48px;

      .propName {
        width: 144px;
        padding-left: 10px;
      }
    }
  }
}
</style>
